<template>
	<el-container>
		<el-main>
			<el-row :gutter="20">
				<el-col :lg="12">
					<el-card style="height:300px;">
						<div class="u-flex">
							<div class="u-flex">
								<Unit v-model="searchData.unit" placeholder="请选择单位"></Unit>
								<Store v-if="searchData.unit.id" v-model="searchData.store" :unit="unit"
									placeholder="请选择门店" class="u-m-l-15"></Store>
							</div>
							<div class="u-m-l-15">
								<!-- <el-tabs type="border-card">
							    <el-tab-pane label="布防"></el-tab-pane>
							    <el-tab-pane label="撤防"></el-tab-pane>
							</el-tabs> -->
								<el-button @click="troops(true)" :disabled="loadingType==2?true:false"
									:loading="loadingType==1?true:false">布防</el-button>
								<el-button @click="troops(false)" :disabled="loadingType==1?true:false"
									:loading="loadingType==2?true:false">撤防</el-button>
							</div>
						</div>
						<div>
							<el-divider content-position="left">撤布防信息</el-divider>
							<div style="height:140px;overflow: auto;">
								<el-table :data="deployList">
									<el-table-column label="日期" prop="createTime"></el-table-column>
									<el-table-column label="门店" prop="storeName"></el-table-column>
									<el-table-column label="撤布防" prop="optionName"></el-table-column>
									<el-table-column label="撤布防类型" prop="alarmType"></el-table-column>
									<!-- <el-table-column label="通道" prop="channelId"></el-table-column> -->
									<el-table-column label="状态" prop="deviceId" width="100">
										<template #default="sopce">
											<el-tag v-if="sopce.row.success" type="success">成功</el-tag>
											<el-tag v-if="!sopce.row.success" type="danger">不成功</el-tag>
										</template>
									</el-table-column>
								</el-table>
								<!-- <div v-for="(item,index) in deployList" :key="index">{{item.alarmType}}</div> -->
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :lg="12">
					<el-card class="jxx-card" style="overflow: visible;height:300px;">
						<div class="u-flex u-row-between">
							<div class="u-text-center">
								<scEcharts width="200px" height="200px" :option="option1"></scEcharts>
								<div class="u-info u-font-16">
									今日告警统计
								</div>
							</div>
							<div class="u-text-center">
								<scEcharts width="200px" height="200px" :option="option2"></scEcharts>
								<div class="u-info u-font-16">
									本周告警统计
								</div>
							</div>
							<div class="u-text-center">
								<scEcharts width="200px" height="200px" :option="option3"></scEcharts>
								<div class="u-info u-font-16">
									本月告警统计
								</div>
							</div>
						</div>
					</el-card>
				</el-col>
			</el-row>
			<el-tabs type="border-card" v-model="searchData.mode" @tab-change="changeMode">
				<el-tab-pane label="今日告警" name="D"></el-tab-pane>
				<el-tab-pane label="本周告警" name="W"></el-tab-pane>
				<el-tab-pane label="本月告警" name="M"></el-tab-pane>
				<el-tab-pane label="自定义查询"></el-tab-pane>
				<div>
					<sc-table ref="table" :apiObj="apiObj" :params="params" orderBy="sort" row-key="id" stripe
						:hideDo="true"> <!-- :data="tableData" -->
						<el-table-column label="门店" prop="storeName"></el-table-column>
						<el-table-column label="设备/通道" prop="deviceId"></el-table-column>
						<el-table-column label="告警信息" prop="alarmTypeName"></el-table-column>
						<el-table-column label="告警时间" prop="alarmTime"></el-table-column>
						<el-table-column label="处理">
							<template #default="scope">
								<el-button @click="onShow(scope.row)">查看</el-button>
							</template>
						</el-table-column>
					</sc-table>
				</div>
			</el-tabs>
		</el-main>
	</el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess"
		@closed="dialog.save=false"></save-dialog>
</template>

<script>
	import scEcharts from '@/components/scEcharts';
	import saveDialog from './save'
	export default {
		name: 'chart',
		components: {
			scEcharts,
			saveDialog
		},
		data() {
			return {
				dialog: {
					save: false
				},
				unit: 0,
				searchData: {
					store: {},
					unit: {},
					mode: 'D', //D W M
				},
				apiObj: this.$API.api.alert.list,
				option1: {
					title: {
						text: '',
						subtext: '',
						left: 'center',
					},
					tooltip: {
						trigger: 'item'
					},
					grid: {
						top: '0px'
					},
					series: [{
						name: '今日告警统计',
						type: 'pie',
						radius: '80%',
						center: ['50%', '50%'],
						label: false,
						data: []
					}]
				},
				option2: {
					title: {
						text: '',
						subtext: '',
						left: 'center',
					},
					tooltip: {
						trigger: 'item'
					},
					grid: {
						top: '0px'
					},
					series: [{
						name: '本周告警统计',
						type: 'pie',
						radius: '80%',
						center: ['50%', '50%'],
						label: false,
						data: []
					}]
				},
				option3: {
					title: {
						text: '',
						subtext: '',
						left: 'center',
					},
					tooltip: {
						trigger: 'item'
					},
					grid: {
						top: '0px'
					},
					series: [{
						name: '本月告警统计',
						type: 'pie',
						radius: '80%',
						center: ['50%', '50%'],
						label: false,
						data: []
					}]
				},
				pages: {
					page: 1,
					pagesize: 200
				},
				tableData: [],
				params: {},
				deployList: [],
				deployKey: '',
				timer: null,
				disabled: false,
				troopsText: '',
				loadingType:0,
				makeRequest:false
			}
		},
		watch: {
			'searchData.unit'() {
				this.searchData.store = {}
				this.unit = this.searchData.unit.id
				this.setParams()
				this.search()
				this.$refs.table.upData(this.params)
			},
			'searchData.store'() {
				this.setParams()
				this.search()
				this.$refs.table.upData(this.params)
			}
		},
		created() {
			this.search()
			this.getDeployList()
		},
		methods: {
			//布防
			async troops(type) {
				if (type === true) {
					this.loadingType = 1
					this.troopsText = '布防'
				} else {
					this.loadingType = 2
					this.troopsText = '撤防'
				}
				this.disabled = true
				let store = null
				if(this.searchData.store.id){
					store = this.searchData.store.id
				}
				let data = {
					enable: type,
					store: store
				}
				const res = await this.$API.api.cam.deploying.post(data)
				if (res.data) {
					this.deployKey = res.data
					this.getFinish()
				} else {
					this.$message({
						type: 'warning',
						message: res.message
					})
					this.disabled = false
					this.loadingType = 0
				}
			},
			// 是否完成
			async getFinish() {
				let data = {
					"key": this.deployKey
				}
				const res = await this.$API.api.cam.finish.post(data)
				if (res.data === true) {
					this.disabled = false
					this.loadingType = 0
					this.$message({
						type: 'success',
						message: this.troopsText + '成功'
					})
					this.stopTimer()
					this.getDeployList()
				} else {
					this.stopTimer()
					if (res && res.code == 200) {
						this.makeRequest = true
						this.startTimer()
					} else {
						this.stopTimer()
					}
				}
			},
			// 停止定时器
			stopTimer() {
				clearInterval(this.timer);
			},
			// 启动定时器
			startTimer() {
				this.timer = setInterval(() => {
					if (this.makeRequest) {
						this.getFinish()
						this.makeRequest = false
					}
				}, 200)
			},
			//布列表
			async getDeployList() {
				let data = {
					"end": "",
					"mode": "D",
					"page": 1,
					"pagesize": 100,
					"start": "",
					"store": this.searchData.store
				}
				if (this.deployKey) {
					data.key = this.deployKey
				}
				const res = await this.$API.api.alert.deploy.post(data)
				if (res) {
					this.deployList = res.data.datas
				}
			},
			changeMode() {
				this.search()
				this.params.mode = this.searchData.mode
				this.$refs.table.upData(this.params)
			},
			setParams() {
				this.params = {
					unit: this.searchData.unit.id || null,
					store: this.searchData.store.id || null,
					mode: this.searchData.mode
				}
			},
			// 搜索
			async search() {
				let data = {
					unit: this.searchData.unit.id,
					store: this.searchData.store.id,
					mode: this.searchData.mode,
					dimension: 'Type'
				}
				const res = await this.$API.api.alert.stat.post(data)
				this.option1.series[0].data = res.data
				data.mode = 'W'
				const res2 = await this.$API.api.alert.stat.post(data)
				this.option2.series[0].data = res2.data
				data.mode = 'M'
				const res3 = await this.$API.api.alert.stat.post(data)
				this.option3.series[0].data = res3.data

			},
			// 加载表格数据
			async getTableData() {
				let data = {
					unit: this.searchData.unit.id,
					store: this.searchData.store.id,
					mode: this.searchData.mode,
					page: this.pages.page,
					pagesize: this.pages.pagesize,
				}
				const res = await this.$API.api.alert.list.post(data)
				this.tableData = res.data.datas
			},
			onShow(row) {
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open('edit').setData(row)
				})
			}
		},
		beforeUnmount() {
			this.stopTimer();
		},
		beforeRouteLeave(to, from, next) {
			next();
			if (this.timer) {
				this.stopTimer()
			}
		}
	}
</script>

<style lang="scss">
</style>
